<template>
  <Input
    ref="inputRef"
    @on-enter="enter"
    :placeholder="placeholder"
    :clearable="clearable"
    :class="wrapClasses"
  >
    <template v-slot:append v-if="!isEnter ">
      <Button
        type="secondary"
        icon="search"
        @click="submit">
      </Button>
    </template>

    <template v-slot:prefix v-else>
      <Button
        type="drop"
        icon="search"
        @click="submit">
      </Button>
    </template>

    <template v-if="filterItems" v-slot:prepend>
      <div class="search-select-wrapper">
        <Select
          class="filter-select"
          :filterable="filterable"
          :style="selectStyle"
          v-model="currentFiltervalue"
          @on-change="change">
          <Option
            v-for="item in filterItems"
            :value="item.value"
            :disabled="item.disabled"
            :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
        <div class="search-devided-line"></div>
      </div>
    </template>
  </Input>
</template>
<script>
import Input from '../input/input.vue'
import Select from '../select/select.vue'
import Option from '../select/option.vue'
import Button from '../button/button.vue'
const prefixCls = 'haloe-search'

export default {
  name:'Search',
  components: {
    Input: Input,
    Select: Select,
    Option:Option,
    Button:Button
  },
  props: {
    isEnter: {
      type: Boolean,
      default: false
    },
    filterValue: {
      type: [Object, Number, String],
      default: () => null
    },
    filterItems: {
      type: Array,
      default: () => null
    },
    filterable:{
      type: Boolean,
      default: false
    },
    filterWidth: {
      type: [Number, String],
      default: 90
    },
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder:{
      type:String,
      default:'请输入'
    }
  },
  emits: [
    'on-enter',
    'on-submit',
    'on-select',
  ],
  computed: {
    wrapClasses () {
      return [
        prefixCls,
        {
          [`${prefixCls}-suffix`]: !this.isEnter,
          [`${prefixCls}-filter`]: this.isFilter
        }
      ]
    },
    isFilter () {
      return !this.isEnter && this.filterItems
    },
    selectStyle () {
      const style = this.isFilter ? {'width': `${this.filterWidth}px`} : {}
      return style
    },
  },
  watch: {
    filterValue (val) {
      this.currentFiltervalue = val
    }
  },
  data () {
    return {
      currentFiltervalue: this.filterValue,
    }
  },
  mounted(){
    this.updateInputStyle()
  },
  methods: {
    updateInputStyle () {
      if (this.$refs['inputRef'] && this.$refs['inputRef'].$refs['input']) {
        const paddingLeft = `${Number(this.filterWidth) + 10}px`
        if(this.isFilter){
          this.$refs['inputRef'].$refs['input'].style.paddingLeft = paddingLeft
        }
      }
    },
    enter () {
      this.$emit('on-enter', this.$refs['inputRef'].currentValue, this.isFilter && this.currentFiltervalue)
    },
    submit () {
      this.$emit('on-submit', this.$refs['inputRef'].currentValue, this.isFilter && this.currentFiltervalue)
    },
    change (value) {
      this.currentFiltervalue = value
      this.$emit('on-select', value)
    }
  },
}
</script>
